<script lang="ts" setup>
defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  column: {
    type: Array,
    default: () => [],
  },
  border: {
    type: Boolean,
    default: true,
  },
});
</script>
<template>
  <div class="content">
    <el-descriptions :column="2" border>
      <el-descriptions-item
        v-for="(item, index) of column"
        :label="item.label"
        label-align="left"
        align="left"
        width="160px"
        class="log"
      >
        <el-link type="primary" v-if="item.isLink" @click="item.func">
          {{ data[item.props] || '--' }}
        </el-link>
        <span v-else>{{
          item.formatter ? item.formatter(data[item.props]) : data[item.props] || '--'
        }}</span>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<style scoped lang="scss">
// 单行文字省略
@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content {
  margin-bottom: 40px;
}

.ellipsis {
  @include text-ellipsis;
  width: 380px;
}
::v-deep .el-descriptions {
  --el-descriptions-item-bordered-label-background: #f5f5f5;
  --el-descriptions-table-border: 1px solid #a6a6a6;
  &__cell {
    padding: 8 !important;
  }
}
</style>
